<script setup>
  import { ElMessage, ElLoading } from "element-plus";
  import { ref, provide, onMounted, onUnmounted, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import useClipboard from 'vue-clipboard3'
  import chatInput from '../../components/chatInput/index.vue'
  import MarkdownView from '../../components/MarkdownView/index.vue'
  import buildKnowledge from '../../components/buildKnowledge/index.vue'
  import request from '../../request/axios'
  import { getFromUrl } from '../../utils/index'
  import { PATH_URL } from '../../request/axios/service.js'
  import { formatDateTimeWithTimestamp, getCurrentDateTime } from '../../utils/time'
  import { fileIco } from '../../utils'
  import { setChatTime } from '../../utils/time'

  const route = useRoute() // 获取路由对象
  const router = useRouter()
  const replyType = ref(false)
  const { toClipboard } = useClipboard()

  // 初始化图标
  // 初始化icon
  const formattingIcon = name => {
    if (!name) return
    return fileIco(name)
  }

  const fileIcon = name => {
    const icon = formattingIcon(name)
    const image = new URL(
      `../../assets/image/file-ico/ico-${icon}.png`,
      import.meta.url
    ).href
    return image
  }

  // 滚动条参数 S
  const chatWindow = ref(null)
  const userScroll = ref(true)
  const srtChatRefList = () => {
    setTimeout(() => {
      chatWindow.value.scrollTop = chatWindow.value.scrollHeight
    }, 10)
  }

  // 用户滚动聊天记录
  const handleScroll = (event) => {
    const { scrollTop, scrollHeight, clientHeight } = event.target;
    userScroll.value = scrollHeight - scrollTop <= clientHeight + 10;
  }

  // 获取模型列表 S
  const modelList = ref([])
  const modelText = ref('')
  const getModelList = async () => {
    try {
      const res = await request.getV2({ url: '/v1/api-model-list' })
      modelList.value = res.data
      modelText.value = res.data[0].producer
    } catch (error) {
      console.log(error)
    }
  }
  getModelList()
  const clickModel = item => {
    modelText.value = item.producer
  }
  // 获取模型列表 E

  // 发送消息
  const sessionId = ref(``)
  const referenceMap = ref([]) // 参考上下文
  const sourceVisible = ref(false) // 知识库
  const termination = ref(false) // 终止
  const chatMesList = ref([])
  const chatTitle = ref('DataMed AI+')
  const params = ref({})
  const knowledgeId = ref('')
  const interval = ref(null) // 定时器
  const sendMessageId = async () => {
    try {
      const data = {
        msg_id: '',
        content: '你是谁',
      }
      const res = await request.postV2({ url: '/v1/api-model-save', data })
      console.log(res);

    } catch (error) {
      console.log(error)
    }
  }
  // sendMessageId()
  const getChatRecordList = async () => {
    try {
      let curIdx = 0
      replyType.value = true
      const data = params.value
      data.session_id = sessionId.value
      // 将用户数据插入历史中
      chatMesList.value.push({
        id: 0,  // 消息id
        session_id: sessionId.value, // 会话id
        send_content: params.value.content, // 用户发送的内容
        model_content: '', // 模型回复
        reasoning_content: '', // 模型推理
        exe_time: 0, // 时间戳
        loadingShow: true, // 加载icon
        iconList: true, // 底部icon
        collect_status: 0, // 收藏
        feedback_status: 0, // 反馈
        model_type: data.model, // 模型
        reference: [], // 参考上下文
        userChecked: false,
        agentChecked: false,
        create_time: getCurrentDateTime() // 发送消息时间
      })
      if (data.files) {
        const array = JSON.parse(data.files)
        for (let i = 0; i < array.length; i++) {
          chatMesList.value[chatMesList.value.length - 1].file_name = array[i].file_name
        }
        chatMesList.value[chatMesList.value.length - 1].file_List = array
      }
      console.log(chatMesList.value);

      chatTitle.value = chatMesList.value[0].send_content
      srtChatRefList()
      termination.value = true
      const response = await fetch(PATH_URL + '/v1/api-model-send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': localStorage.getItem("token"),
        },
        body: JSON.stringify(data)
      })
      chatMesList.value[chatMesList.value.length - 1].loadingShow = false
      const reader = response.body.getReader()
      let decoder = new TextDecoder()
      let result = ''
      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        // 处理流式数据
        const chunk = decoder.decode(value, { stream: true })
        result += chunk

        // 解析并更新内容
        const lines = result.split('\n\n').filter(line => line.trim())
        for (let i = curIdx; i < lines.length; i++) {
          // 去掉 "data: " 前缀
          const jsonStr = lines[i].replace(/^data: /, '')
          const parsed = JSON.parse(jsonStr)

          if (!termination.value) return

          if (parsed.content) {
            chatMesList.value[chatMesList.value.length - 1].model_content += parsed.content
          }
          if (parsed.reasoning_content) {
            chatMesList.value[chatMesList.value.length - 1].reasoning_content += parsed.reasoning_content
          }
          if (parsed.msg_id) {
            chatMesList.value[chatMesList.value.length - 1].model_id = parsed.msg_id
          }
          if (parsed.smsg_id) {
            chatMesList.value[chatMesList.value.length - 1].id = parsed.smsg_id
          }
          if (parsed.exe_time) {
            chatMesList.value[chatMesList.value.length - 1].exe_time = parsed.exe_time
          }
          if (parsed.reference) {
            chatMesList.value[chatMesList.value.length - 1].reference = parsed.reference
          }
          if (parsed.session_id) {
            sessionId.value = parsed.session_id
            chatMesList.value[chatMesList.value.length - 1].session_id = parsed.session_id
          }

          curIdx++
          if (userScroll.value) {
            srtChatRefList()
          }
        }
      }
      replyType.value = false
      termination.value = false
      chatMesList.value[chatMesList.value.length - 1].iconList = false
      srtChatRefList()
    } catch (error) {
      console.log(error)
    }
  }
  // end

  // 获取历史记录 S
  const getHistoryList = async () => {
    try {
      if (!sessionId.value) return
      const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(255, 255, 255, 0.7)',
      })
      chatMesList.value = []
      const res = await request.getV2({
        url: '/v1/api-chat-details?session_id=' + sessionId.value
      })
      loading.close()
      if (res.data.length == 0) return
      res.data.forEach(item => {
        if (item.file_name !== null) {
          item.file_List = item.file_name.split(',').map(item => ({ file_name: item }));
        } else {
          item.file_List = [];
        }
      })

      chatMesList.value = res.data
      chatTitle.value = res.data[0].send_content

      localStorage.setItem("knowledgeId", res.data[res.data.length - 1].knowledge_id)
      localStorage.setItem("databaseName", res.data[res.data.length - 1].database_name)
      srtChatRefList()
    } catch (error) {
      console.log(error)
    }
  }

  // 获取缓存里得数据
  const initialization = localStorage.getItem('initialization')
  const setInitialization = () => {
    if (localStorage.getItem('initialization')) {
      params.value = JSON.parse(initialization)
      sessionId.value = params.value.session_id ? params.value.session_id : '';
      localStorage.removeItem('initialization')
      getChatRecordList()
    }
  }

  // 监听路由参数变化
  watch(
    () => route.query.id,
    (newId, oldId) => {
      if (newId !== oldId && newId != 'initialization') {
        if (!localStorage.getItem('initialization')) {
          sessionId.value = newId
          getHistoryList()
        } else {
          setInitialization()
        }
      }
    }
  )

  // 获取地址上的url S
  if (route.query.id) {
    if (route.query.id != 'initialization') {
      if (!localStorage.getItem('initialization')) {
        sessionId.value = route.query.id
        getHistoryList()
      } else {
        setInitialization()
      }
    } else {
      setInitialization()
    }
  }
  // 获取地址上的url E

  // 获取输入框传递值
  provide('chatMessage', value => {
    params.value = value
    if (modelText.value == 'ChatGPT') {
      params.value.model = 'gpt-4o'
    }
    getChatRecordList()
  })


  // 配置
  const buildKnowledgeRef = ref(null)
  const clickConfiguration = async () => {
        // ElMessage.warning('知识库相关功能正在开发中，敬请期待')
        // return
    try {
      const res = await request.postV2({ url: '/v1/api-user-prompt' })
      if (res.code == 200) {
        if (res.data.is_prompt_status == 1) return ElMessage.warning(res.data.prompt)
        if (buildKnowledgeRef.value) return buildKnowledgeRef.value.setCheckedVisible();
      }
    } catch (error) {
      console.log(error)
    }
    // router.push('/configuration')
  }
  provide('knowledge', value => {
    clickConfiguration()
  })
  const setModelSave = async (chatMessage) => {
    const data = {
      msg_id: chatMessage.model_id,
      content: chatMessage.model_content,
      reasoning_content: chatMessage.reasoning_content,
    }
    if (chatMessage.model_content == '' || chatMessage.reasoning_content == '') return ElMessage.warning('正在请求模型中，请勿终止')
    const res = await request.postV2({ url: '/v1/api-model-save', data })
    if (res.code != 200) return
    termination.value = false
    chatMesList.value[chatMesList.value.length - 1].iconList = false
    chatMesList.value[chatMesList.value.length - 1].loadingShow = false
  }

  // 用户终止生成
  provide('chatTermination', value => {
    clearInterval(interval.value)
    setModelSave(chatMesList.value[chatMesList.value.length - 1])
    srtChatRefList()
  })

  // 是否上传了文件 校验聊天高度
  const fileLength = ref(0)
  provide('fileBoxShow', value => {
    fileLength.value = value
  })
  // 收藏 / 取消收藏 S
  const setCollectIcon = (status, inx) => {
    if (inx == 1) {
      return status === 1 ?
        new URL(
          `../../assets/image/icon/collection.png`,
          import.meta.url
        ).href : new URL(
          `../../assets/image/icon/collections.png`,
          import.meta.url
        ).href
    } else {
      return status === 1 ?
        new URL(
          `../../assets/image/icon/already-drop.png`,
          import.meta.url
        ).href : new URL(
          `../../assets/image/icon/drop.png`,
          import.meta.url
        ).href
    }
  }
  const clickCollect = async (item, index) => {
    isShareBox.value = true
  }
  // 收藏 / 取消收藏 E

  // 重试 S
  const clickRetry = async (item) => {
    termination.value = false;
    params.value.model = item.model_type;
    params.value.content = item.send_content;
    getChatRecordList()
  }
  // 重试 E
  // 反馈 S
  const feedback = ref({
    content: '', // 反馈内容
    tag_id: 0, // 反馈类型
    msg_id: 0, // 消息id
    index: -1 // 消息索引
  })
  const feedbackList = ref([])
  const dialogFeedback = ref(false)
  const getFeedbackList = async () => {
    try {
      const res = await request.getV2({ url: '/v1/api-tag-list' })
      feedbackList.value = res.data
    } catch (error) {
      console.log(error)
    }
  }
  getFeedbackList()
  const clickFeedbackPopup = (item, index) => {
    feedback.value = {
      content: '', // 反馈内容
      tag_id: 0, // 反馈类型
      msg_id: 0, // 消息id
      index: -1 // 消息索引
    }
    if (item.feedback_status == 1) return ElMessage.warning({ message: '该条消息已反馈！' })
    feedback.value.msg_id = item.id
    feedback.value.index = index
    dialogFeedback.value = true
  }
  const clickFeedbackBack = async () => {
    if (feedback.value.content == '' || feedback.value.tag_id == 0) return ElMessage.warning({ message: '请完善反馈信息！' })
    const data = feedback.value
    const res = await request.postV2({ url: '/v1/api-feed-back', data })
    dialogFeedback.value = false
    chatMesList.value[feedback.value.index].feedback_status = 1
    ElMessage.success({ message: '反馈成功！' })
  }
  // 反馈 E
  // 复制 S
  const handleCopy = async (data) => {
    try {
      await toClipboard(data.model_content)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.warning('您的浏览器不支持复制：', e)
    }
  }
  // 复制 E

  // 在页面加载时检查是否有刷新标记
  onMounted(() => {
    if (localStorage.getItem('isRefresh')) {
      const URL = localStorage.getItem('isRefresh') == initialization ? '/initialization' : ('/chatBot?id=' + localStorage.getItem('isRefresh'))
      router.push(URL)
      localStorage.removeItem('isRefresh')
    }
  })
  const isSourceVisible = async (item) => {
    try {
      const res = await request.postV2({ url: '/v1/api-user-prompt' })
      if (res.code == 200) {
        if (res.data.is_prompt_status == 1) return ElMessage.warning(res.data.prompt)
        referenceMap.value = item.reference ? item.reference : item.model_reference
        sourceVisible.value = true
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 监听路由变化
  onUnmounted(() => {
    localStorage.removeItem('isRefresh')
  })

  // 获刷新事件
  window.addEventListener('beforeunload', () => {
    localStorage.setItem('isRefresh', sessionId.value ? sessionId.value : 'initialization')
  })

  const isShareBox = ref(false)
  const clickShare = async (type) => {
    const messageList = [];
    chatMesList.value.forEach((item) => {
      if (item.userChecked) { messageList.push(item.id); }
      if (item.agentChecked) { messageList.push(item.model_id); }
    });
    if (chatMesList.value.length == 0) return ElMessage.warning({ message: '请选择要分享的内容！' })
    if (messageList.length == 0) return ElMessage.warning({ message: '请选择要分享的内容！' })

    const data = { type, msgId: messageList.join(',') }
    const res = await request.postV2({ url: '/v1/api-collect-conversations', data })

    const fullUrl = window.location.href;
    let urlWithoutQuery = fullUrl.split('/chatBot')[0];
    const url = `${urlWithoutQuery}/share?type=1&id=${res.data.id}`

    if (type == 2) {
      try {
        await toClipboard(url)
      } catch (e) {
        ElMessage.warning('您的浏览器不支持复制：', e)
      }
    }
    ElMessage.success({ message: type == 2 ? '复制成功！' : '操作成功！' })
    isShareBox.value = false
  }

</script>

<template>
  <div class="content-chat">
    <div class="configuration" @click="clickConfiguration">
      知识库配置
    </div>
    <div class="chat-title">
      <div class="nowrap-hide" style="max-width: 400px">
        <!-- {{ chatTitle }} -->
        DataMed AI+
      </div>
      <!-- <el-dropdown trigger="click">
        <span class="el-dropdown-link">{{ modelText }}</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in modelList" :key="index" @click="clickModel(item)">{{ item.producer
              }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown> -->
    </div>
    <div class="overflow-none chat-message-list" :style="fileLength > 0 ? 'height: calc(100vh - 360px)' : ''"
      ref="chatWindow" @scroll="handleScroll">
      <div v-for="(item, index) in chatMesList" :key="index">
        <div :class="['user-message', {'message-checked' : item.userChecked && isShareBox} ]">
          <el-checkbox v-if="isShareBox" v-model="item.userChecked" class="checkbox-content" size="large" />
          <div class="message-time">{{formatDateTimeWithTimestamp(item.create_time)}}</div>
          <div>
            <div class="message-file-list" v-for="(item,index) in item.file_List" ::key="index">
              <img :src="fileIcon(item.file_name)" style="width: 40px;">
              <div class="nowrap-hide file-name">{{item.file_name}}</div>
            </div>
          </div>
          <div style="width: 100%;height: 20px;"></div>
          <div class="message-test">
            <MarkdownView :content="item.send_content"></MarkdownView>
          </div>
        </div>
        <div :class="['ai-message', {'message-checked' : item.agentChecked && isShareBox} ]">
          <el-checkbox v-if="isShareBox" v-model="item.agentChecked" class="checkbox-content" size="large" />
          <div v-if="isShareBox" style="width: 40px;"></div>
          <img class="ai-avatar" src="../../assets/image/icon/model-image.png" />
          <div class="ai-test">
            <!-- 推理 -->
            <div class="model-content" v-if="item.reasoning_content || item.model_reasoning_content">
              <div class="model-title" v-if="item.iconList">推理中...</div>
              <div class="model-box">{{item.reasoning_content || item.model_reasoning_content}}</div>
            </div>
            <img src="../../assets/image/loading.gif" v-if="item.loadingShow" class="icon-loading" />
            <MarkdownView :content="item.model_content"></MarkdownView>
            <div class="ai-research" v-if="!item.iconList">
              <span v-if="item.reference?.length > 0 || item.model_reference?.length > 0"
                @click="isSourceVisible(item)">{{item.reference
                ?item.reference.length:item.model_reference?item.model_reference.length:0}}条引用来源</span>
              <span v-if="item.exe_time != 0">{{ setChatTime(item.exe_time,item.model_exe_time) }}s</span>
            </div>
            <div class="ai-assistant" v-if="!item.iconList && !isShareBox">
              <img src="../../assets/image/icon/retry.png" v-if="chatMesList.length - 1 == index"
                @click="clickRetry(item)" class="assistant-icon" />
              <img src="../../assets/image/icon/cope.png" @click="handleCopy(item)" class="assistant-icon" />
              <img :src="setCollectIcon(item.feedback_status,0)" @click="clickFeedbackPopup(item,index)"
                class="assistant-icon" />
              <img :src="setCollectIcon(item.collect_status,1)" @click="clickCollect(item,index)"
                class="assistant-icon" />
              <Share style="color: #9f9f9f;width: 20px;" @click="isShareBox = true" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <chatInput :replyType="replyType" :modelType="modelText" :termination="termination" :chatMessageType="true" />

    <!-- 分享收藏底部 -->
    <div class="share-box" v-if="isShareBox">
      <div type="primary" class="share-btn" @click="clickShare(2)">
        <img src="../../assets/image/icon/lianjie.png" />分享链接
      </div>
      <div type="primary" class="share-btn" @click="clickShare(1)">
        <img src="../../assets/image/icon/xiaochengxu.png" />收藏
      </div>
      <!-- <div type="primary" class="share-btn">
        <img src="../../assets/image/icon/xiaochengxu.png" />小程序码
      </div> -->
      <Close class="close-icon" @click="isShareBox = false" />
    </div>

    <!-- 上下文弹窗 -->
    <el-dialog v-model="sourceVisible" title="引用来源" width="600">
      <div class="source-item" v-for="(item,index) in referenceMap" :key="index">
        <!-- <div style="font-size: 15px;margin-bottom: 2px;font-weight: bold;color: #333;">{{item.name}}</div>
        <span>{{item.file_name}}</span> -->
        <MarkdownView :content="item" />
      </div>
    </el-dialog>

    <!-- 反馈弹窗 -->
    <el-dialog v-model="dialogFeedback" class="feedback-content" center align-center title="反馈" width="500">
      <div class="feedback-list">
        <div :class="['feedback-box', { 'feedback-box-active': item.id == feedback.tag_id }]"
          @click="feedback.tag_id = item.id" v-for="(item, index) in feedbackList" :key="index">{{item.name}}</div>
      </div>
      <el-input v-model="feedback.content" :rows="5" class="feedback-textarea" type="textarea" placeholder="请写下您的反馈吧" />
      <el-button class="feedback-btn" @click="clickFeedbackBack" type="primary">提交</el-button>
    </el-dialog>

    <!-- 配置绑定 -->
    <buildKnowledge ref="buildKnowledgeRef" :sessionId="sessionId" />
  </div>
</template>

<style scoped lang="scss">
  .share-icon {
    width: 28px;
    height: 28px;
    position: absolute;
    bottom: 300px;
    right: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    background: #2D66B3;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 80%;
      height: 80%;
    }
  }

  :deep(.el-checkbox__inner) {
    width: 24px !important;
    border-radius: 50%;
    height: 24px !important;
    font-size: 20px;
  }

  :deep(.el-checkbox__inner:after) {
    width: 6px;
    height: 12px;
    left: calc(50% - 4px);
    top: calc(50% - 8px);
    border-width: 2px;
  }

  .checkbox-content {
    position: absolute;
    top: 0;
    left: 10px;
    width: 20px;
  }

  .share-box {
    position: fixed;
    bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 800px;
    padding: 40px 0;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(23, 95, 170, 0.1);

    .close-icon {
      width: 26px;
      font-size: 30px;
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
    }

    .share-btn {
      width: 160px;
      margin: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #3D3D3D;
      cursor: pointer;

      img {
        width: 54px;
        height: 54px;
        margin-bottom: 6px;
      }
    }
  }

  .source-item {
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);
    border: 1px solid #F0F4FF;
  }

  .feedback-content {

    .feedback-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-left: 15px;

      .feedback-box {
        font-size: 14px;
        color: #474747;
        padding: 4px 16px;
        border-radius: 7px;
        margin-right: 15px;
        margin-bottom: 15px;
        cursor: pointer;
        background: rgba(232, 232, 232, 0.7);
      }

      .feedback-box-active {
        color: #fff;
        background: #2D66B3;
      }
    }

    .feedback-textarea {
      margin-bottom: 20px;
    }

    .feedback-btn {
      margin: 0 auto;
      width: 300px;
      background: #2D66B3;
      margin-left: calc(50% - 150px);
    }
  }

  .icon-loading {
    width: 40px;
    height: auto;
  }

  .content-chat {
    width: 800px;
    position: relative;

    .configuration {
      width: 100px;
      height: 38px;
      cursor: pointer;
      line-height: 38px;
      text-align: center;
      border-radius: 12px;
      font-size: 16px;
      color: #2d66b3;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #2d66b3;
      position: absolute;
      right: -100px;
      top: 45px;
    }

    .chat-title {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 60px;
      margin-top: 50px;
      font-size: 22px;
      font-weight: 600;
      color: #000000;

      span {
        width: 120px;
        height: 32px;
        color: #11be22;
        font-size: 14px;
        line-height: 32px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        margin-left: 10px;
        background: rgba(17, 190, 34, 0.1);
      }
    }

    .chat-message-list {
      height: calc(100vh - 300px);
      margin: 20px 0;
      overflow: hidden;
      overflow-y: auto;

      .ai-message,
      .user-message {
        display: flex;
        align-items: start;
        justify-content: end;
        flex-wrap: wrap;
        margin-bottom: 10px;
        position: relative;
        padding: 10px;

        .message-test {
          font-size: 16px;
          color: #3d3d3d;
          padding: 10px 18px;
          max-width: 80%;
          border-radius: 12px;
          background: #dcecf3;
        }

        .message-time {
          width: 100%;
          font-size: 14px;
          color: #999;
          text-align: right;
          margin-bottom: 8px;
        }

        .message-file {
          display: flex;
          align-items: flex-start;
          cursor: pointer;

          .file-name {
            max-width: 140px;
            margin-left: 8px;
          }

          img {
            width: 20px;
            margin-right: 4px;
          }
        }
      }

      .message-checked {
        border-radius: 12px;
        background-color: #FAFBFF;
        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);
      }

      .ai-message {
        justify-content: start;
        flex-wrap: wrap;

        .ai-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        .ai-test {
          margin-left: 12px;
          max-width: 80%;
        }

        .model-content {
          border: 1px solid #c9c9c9;
          width: 100%;
          border-radius: 8px;
          padding: 10px;
          margin-bottom: 10px;

          .model-title {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            height: 32px;
            display: flex;
            align-items: center;
            color: #333;
            margin-bottom: 12px;
            position: relative;
          }

          .model-box {
            color: #666;
            line-height: 24px;
            font-size: 14px;
          }
        }

        .ai-research {
          display: flex;
          align-items: center;
          margin-top: 12px;

          span {
            color: #ff0000;
            font-size: 14px;
            padding: 5px 12px;
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid #ff0000;
            background: rgba(255, 0, 0, 0.1);

            &:nth-child(1) {
              margin-right: 8px;
              color: #2d66b3;
              border: 1px solid #2d66b3;
              background: rgba(45, 102, 179, 0.1);
            }
          }
        }

        .ai-assistant {
          margin-top: 12px;
          cursor: pointer;

          .assistant-icon {
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }
        }
      }
    }
  }

  .message-file-list {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 10px 20px;
    border-radius: 12px;
    background: #dcecf3;

    .file-name {
      max-width: 140px;
      margin-left: 8px;
    }
  }
</style>